<template>
	<view class="definite">
		<u-navbar :is-back="true" :custom-back="BackM" title="底座详情" back-text="">
			<!--  -->
		</u-navbar>
		<view class="em_message">
			<span class="em_me">· 基础信息 ·</span>
			<span class="image-one">
				<image src="../../../style/image/order/B3.png" alt="" />
				<span @click="go">导航</span>
			</span>
		</view>

		<view class="item-content">
			<u-avatar :size="150" mode="square" :src="shopInfo.shopLogo"></u-avatar>

			<view style="margin-left: 1rem">
				<view class="">
					<view class="name">{{ shopInfo.shopName }}</view>
				</view>
				<view class="">
					<view class="time">铺货时间：{{ terminals.activeTime }}</view>
				</view>
				<view class="">
					<view class="address"> 地址：{{ shopInfo.address }} </view>
				</view>
			</view>
		</view>

		<view class="em_message">
			<view class="em_me">· 商户分润 ·</view>
		</view>
		<view class="item-two">
			<view class="item">
				<span>联系人</span>
				<span class="item-three">{{shopInfo.userName }}</span>
			</view>
			<view class="item">
				<span>联系电话</span>
				<span class="item-three">{{ shopInfo.phone }}</span>
			</view>
			<view class="item">
				<span>商户分润金额</span>
				<span class="item-three">¥</span>
			</view>
			<view class="item">
				<span>{{shopInfo.profitPattern == "0" ? "绝对分润" : "相对分润"
        }}</span>
				<span class="item-three">{{ shopInfo.profitRatio * 100 }}</span>
			</view>
			<view class="item">
				<span>手续费</span>
				<span class="item-three">{{shopInfo.drawRatio * 100 }}%</span>
			</view>
			<view class="item">
				<span>查看订单权限</span>
				<span class="item-three">{{shopInfo.showOrder == "0" ? "无权限" : "有权限"
        }}</span>
			</view>
			<view class="item">
				<span>查看商户分润比例权限</span>
				<span class="item-three">{{shopInfo.shopProfitRatio == "0" ? "无权限" : "有权限"
        }}</span>
			</view>
		</view>
		<view class="em_message">
			<view class="em_me">· 充电宝设备资费 ·</view>
		</view>
		<view class="item-two">
			<view class="item">
				<span>计费模式</span>
				<span class="item-three">{{shopInfo.shopProfitRatio == "1" ? "30分钟" : "60分钟"
        }}</span>
			</view>
			<view class="item">
				<span>计费单价</span>
				<span class="item-three">{{shopInfo.billingPrice }}</span>
			</view>
			<view class="item">
				<span>封顶值</span>
				<span class="item-three">{{shopInfo.billingMaxPrice }}</span>
			</view>
		</view>

		<view class="em_message">
			<span class="em_me">· 设备{{posType.modelsName }} SN({{terminal.sn}})
				·</span>
			<span class="image-one">
				<span @click="outDevice(terminal,posType,)">弹出设备</span>
			</span>
		</view>


		<view class="item-two" style="margin-bottom: 2rem">
			<view class="item" style="display: flex; justify-content: space-between;align-items: center;">
				<view style="width:5rem">充电宝SN码</view>
				<view>
					<view v-for="(itemd, indexd,grooveCount) in terminals" :key="indexd">{{ itemd.sn }},</view>
				</view>
			</view>
			<view class="care">（注：红色代表其他代理的充电宝）</view>
		</view>

		<view @click="terminalRelieveM" class="footP">
			<view style="padding: 0.7rem; display: flex; align-items: center">
				<!-- <image style="width: 1rem;" src="../../style/image/cargo/add.jpg" alt=""> -->
				<view style="color: white; margin-left: 0.2rem">解绑设备</view>
			</view>
		</view>
	</view>
</template>

<script lang='ts'>
	import {
		Component,
		Prop,
		Vue,
		Watch,
		Emit
	} from "vue-property-decorator";

	import uNavbar from "@/uview-ui/components/u-navbar/u-navbar.vue";

	import uAvatar from "../../../uview-ui/components/u-avatar/u-avatar.vue";

	import {
		findTerminalDetails,
		terminalRelieve
	} from "../../../utils/uniApi";

	@Component({
		//   @Component  是一个装修器   不可以在下面写语句
		name: "test",
		components: {
			"u-navbar": uNavbar,
			"u-avatar": uAvatar,
		},
	})
	export default class extends Vue {
		@Prop({
			type: String, // 父组件传递给子组件的数据类型
			required: false, // 是否必填
			default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
		})
		msg!: string;

		public src = "";

		public grooveCount = ""; //设备数量

		allData: any = {};

		public shopInfo = {
			shopLogo: "无数据",
			shopName: "",
			auditTime: "",
			userName: "", //	联系人名字
			phone: "", //手机号（联系人手机号）
		};

		public posType = {
			modelsName: "",
		};

		public terminal = {

		}

		public types = ''

		//   public terminals = {
		//  id :'',  //设备ID
		//  userId  :'',// O单用户ID
		//  sn  :'无数据',  //设备编号
		//  outTime:'',  // 发货时间
		//  activeTime:'', // 激活时间
		//  status :'',  ///0未铺货，1以铺货，2被买走
		//  distributionUserId :'',//铺货人id
		//  parentId :'', //父级id
		//  type :'',  //0,充电宝，1充电宝座子
		//  posBrandId :'', //品牌ID
		//  posTypeId :'', //机型ID
		//  price :'',  //设备购买时的单价（不可改变）
		//  remarks :'',  //备注
		//  shopBranchId:'', //商户网点ID
		//  shopId:'',   //商户ID
		//  grooveCount:'',  //设备总槽位数
		// }


		public shopBranchInfo = {
			contactsName: "", //	联系人名字
			contactsPhone: "", //	联系人手机号
		};

		public terminalId = "";

		public terminals: any = ''

		created() {}

		onLoad(option: any) {
			console.log(JSON.parse(option.data));

			this.terminalId = JSON.parse(option.data).a;

			this.types = JSON.parse(option.data).b;

			console.log(
				this.terminalId,
				" this.terminalIdthis.terminalIdthis.terminalId"
			);
		}

		mounted() {
			//  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
			//  uni.navigateTo({
			// url: './selectBusin'
			// });

			uni.showLoading({
				title: '加载中'
			});

			this.findTerminalDetailsM();
		}
		go() {
			uni.chooseLocation({
				success: function(res) {
					console.log('位置名称：' + res.name);
					console.log('详细地址：' + res.address);
					console.log('纬度：' + res.latitude);
					console.log('经度：' + res.longitude);
				}
			});
		}
		findTerminalDetailsM() {
			let parmas = {
				userId: uni.getStorageSync("userId") == "" ?
					"" : parseInt(uni.getStorageSync("userId")),
				terminalId: this.terminalId,
			};
			findTerminalDetails(parmas).then((res: any) => {
				console.log(res, "设备");
				this.grooveCount = res.data.data.terminal.grooveCount
				// console.log(res.data.data.terminal.grooveCount)
				if (res.data.data.posType == null) {

				} else {
					this.posType = res.data.data.posType
				}

				if (res.data.data.shopInfo == null) {

				} else {
					this.shopInfo = res.data.data.shopInfo
				}

				if (res.data.data.terminal == null) {

				} else {
					this.terminal = res.data.data.terminal
				}

				if (res.data.data.terminals == null) {

				} else {
					this.terminals = res.data.data.terminals
				}

				uni.hideLoading();






			});
		}
		//弹出设备按钮
		outDevice(value: any, option: any, number: any) {
			console.log(value, option, '++--')
			var dic = {
				value: value,
				option: option,
				number: number
			}
			// console.log(dic,'++++++++dic')
			uni.navigateTo({
				url: "../../../views/sEquiptment/ejectNext?deviceDic=" + encodeURIComponent(JSON.stringify(value)),
			});
		}
		terminalRelieveM() {

			let parmas = {
				userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
				terminalId: this.terminalId //	设备ID
			}

			terminalRelieve(parmas).then((res: any) => {

				console.log('解绑设备', res)

			})
		}


		BackM() {

			// alert(this.types)
			if (this.types == '我的设备') {
				uni.navigateTo({
					url: "../../../pages/equipment/myEquipment",
				});
			} else {
				uni.navigateTo({
					url: "../../../pages/equipment/disconnect",
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.definite {
		font-family: PingFang SC;
		background: #f3f5f7;
		// height: 100%;
	}

	uni-page-body {
		height: 100%;
	}

	.em_message {
		background: #ffffff;
		padding: 0.8rem;
		margin: 0.5rem 0.5rem 0 0.5rem;
		border-radius: 0.3rem 0.3rem 0 0;
		border-bottom: 0.04rem #ffe5e5e5 solid;
	}

	.em_me {
		font-size: 0.78rem;
		font-weight: 400;
		color: #000000;

		width: 15rem;
		word-break: keep-all;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.image-one {
		float: right;
		font-size: 0.6rem;
		font-family: PingFang SC;
		font-weight: 400;
		color: #02af74;
		line-height: 1rem;
	}

	.image-one image {
		width: 0.7rem;
		height: 0.55rem;
		padding-right: 0.2rem;
	}

	.item-content {
		display: flex;
		align-items: center;
		// justify-content: space-between;
		padding: 0.7rem;
		margin: 0 0.5rem 0.5rem 0.5rem;
		height: 5rem;
		background: #ffffff;
		font-family: PingFang SC;
		margin-bottom: 0.03rem;
		border-radius: 0 0 0.3rem 0.3rem;
		border-bottom: 0.03rem #e5e5e5 solid;
	}

	.image-two {
		float: left;
		width: 4.9rem;
		height: 4.9rem;
		background: #e5e5e5;
		border-radius: 0.4rem;
	}

	.item-one {
		padding-left: 0.6rem;
		float: left;
		width: 12rem;
	}

	.item-two {
		margin: 0 0.5rem 0.5rem 0.5rem;
		padding: 0.5rem 0.4rem;
		background: #ffffff;
		font-size: 0.68rem;
		border-radius: 0 0 0.3rem 0.3rem;
		font-family: PingFang SC;
		font-weight: 300;
		color: #333333;
	}

	.item-three {
		float: right;
	}

	.item {
		line-height: 1.4rem;
	}

	.item :first-child {
		font-weight: 400;
	}

	.name {
		font-size: 0.7rem;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 1.2rem;
	}

	.time {
		font-size: 0.6rem;
		font-family: PingFang SC;
		font-weight: 300;
		color: #333333;
		line-height: 1.5rem;
	}

	.address {
		font-size: 0.65rem;
		font-family: PingFang SC;
		font-weight: 300;
		color: #333333;
		line-height: 1rem;
	}

	.care {
		padding: 1.8rem 0 0.5rem 0;
		font-size: 0.55rem;
		font-family: PingFang SC;
		font-weight: 300;
		color: #333333;
		background: #ffffff;
		text-align: center;
	}

	.button {
		margin-top: 1rem;
		font-size: 0.8rem;
		font-family: PingFang SC;
		font-weight: 400;
		color: #ffffff;
		line-height: 2.5rem;
		height: 2.5rem;
		background: #02af74;
		border-radius: 0;
	}

	.footP {
		position: fixed;
		bottom: 0;
		background-color: #02af74;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>
